<template>
	<view style="width: 100%;height: 100vh;background-color: #EFEFEF;">
		<view class="mian" style="border-top: 18rpx solid #efefef;">
			<view class="mian__name" style="border-bottom: 2rpx solid #EFEFEF;">
				<text class="mian__name__title">姓名</text>
				<text class="mian__name__info">{{my_info.realname}}</text>
			</view>
			<view class="mian__name">
				<text class="mian__name__title">性别</text>
				<text class="mian__name__info">{{my_info.sex == 1?'男':'女'}}</text>
			</view>
		</view>
		<view class="mian">
			<view class="mian__name" style="border-bottom: 2rpx solid #EFEFEF;" @click="change">
				<text class="mian__name__title">单位名称</text>
				<text class="mian__name__info">{{deps_list == ''?'请选择部门':deps_list}}</text>
			</view>
			<view class="mian__name">
				<text class="mian__name__title">手机号码</text>
				<text class="mian__name__info">{{my_info.phone}}</text>
			</view>
		</view>
		<view class="go-out">
			<view class="go-out__info" @click="goOut">
				退出登录
			</view>
		</view>
		<!-- 退出 -->
		<view class="bounced" v-if="is_out">
			<view class="bounced__box">
				<view class="bounced__box__title">
					确认退出吗？
				</view>
				<view class="bounced__box__button">
					<view class="bounced__box__button__no" @click="goBack">取消</view>
					<view class="bounced__box__button__yes" @click="goLogin">确定</view>
				</view>
			</view>
		</view>
		<view class="list" v-if="is_deps_show">
			<view class="list__box">
				<view class="list__box__no">
					<view class="list__box__no__text" @click="is_deps_show = !is_deps_show">
						取消
					</view>
				</view>
				<view class="list__box__text"  >
						<view class="list__box__text__title" v-for="(item,index) in deps_lists" :key='index' @click="selectDepart(index)">
							{{item.departName}}
						</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {Debounce} from 'common/utils.js' // 防抖函数（减少函数的调用）
	
	export default {
		data() {
			return {
				my_info: {}, //信息详情
				is_out: false, //登出弹框
				deps_list: "", //我的部门
				deps_lists:[], //部门列表
				is_deps_show: false, //部门列表弹框
			}
		},
		onLoad() {
			this.my_info = uni.getStorageSync('userInfo')
			this.deps_list = uni.getStorageSync('deps_list')
			this.$appReport.fSysDepartGetDeps().then((res)=>{
				this.deps_lists= res.data && res.data.result || []
				if(this.deps_lists.length == 1 && this.deps_list == '') {
					this.deps_list = this.deps_lists[0].departName
					uni.setStorageSync('deps_list',this.deps_list)
				}
			})
			
		},
		methods: {
			goOut() {
				this.is_out = !this.is_out
			},
			/**
			 * @name 选择单位名称
			 * @param  index 序号
			 */
			selectDepart(index) {
				this.deps_list = this.deps_lists[index].departName
				this.is_deps_show = false
				uni.setStorageSync('deps_list',this.deps_list)
			},
			/**
			 * @name 部门弹框
			 */
			change() {
				if(this.deps_lists.length == 1) return
				this.is_deps_show = true
			},
			/**
			 * @name 登出
			 */
			goLogin:Debounce(
			function(){
				this.is_out = !this.is_out
				uni.clearStorageSync('token')
				uni.clearStorageSync('userInfo')
				uni.reLaunch({
					url:'/pages/register/login'
				})
			}),
			/**
			 * @name 取消登出
			 */
			goBack() {
				this.is_out = !this.is_out
			}
		}
	}
</script>

<style lang="less">
	.mian {
		border-bottom: 18rpx solid #efefef;background-color: #FFFFFF;
		&__name {
			width: 90%;height: 96rpx; padding: 0 36rpx;display: flex;align-items: center;justify-content: space-between;
			&__title {
				font-size: 28rpx;color: #000000;
			}
			&__info {
				font-size: 28rpx;color: #333333;
			}
		}
	}
	.go-out {
		width: 100%;height: 96rpx;color: #000000;background-color: #FFFFFF; font-size: 36rpx;display: flex;align-items: center;justify-content: center;
		&__info {
			width: 174rpx;height: 64rpx;display: flex;align-items: center;justify-content: center;
		}
	}
	.bounced {
		width: 100%;height: 100%;background-color: rgba(0,0,0,0.5); position: fixed;top: 0rpx;left: 0rpx;
		&__box {
			width: 560rpx;height: 296rpx;border: 2rpx solid #000000;background-color: #FFFFFF;position: absolute;top: 46.6%;left: 50%; transform: translate(-50%,-50%);border-radius: 12rpx;overflow: hidden;
			&__title {
				height: 200rpx;display: flex;align-items: center;justify-content: center;
			}
			&__button {
				width: 100%;height: 92rpx;display: flex;align-items: center;border-top: 2rpx solid rgba(0,0,0,0.04);justify-content: center;
				&__no {
					width: 50%;height: 100%;display: flex;align-items: center;justify-content: center;color: rgba(153,153,153,1);background-color: #FFFFFF;font-size: 30rpx;
				}
				&__yes {
					width: 50%;height: 100%;display: flex;align-items: center;justify-content: center;border-left: 2rpx solid rgba(0,0,0,0.04);color: rgba(49,114,182,1);background-color: #FFFFFF;font-size: 30rpx;font-weight: 700;
				}
			}
		}
	}
	.list {
		position: fixed;top: 0rpx;bottom: 0px;left: 0px;right: 0px;background: rgba(0, 0, 0, 0.6);
		&__box {
			position: absolute;bottom: 0rpx;left: 0;right: 0;
			&__no {
				flex: 1;background-color: #FFFFFF;border-radius: 12rpx 12rpx 0rpx 0rpx;height: 40rpx;display: flex;align-items: center;justify-content: flex-end;padding: 30rpx;
				&__text {
					font-size: 16px;
				}
			}
			&__text {
				flex: 1;height: 300rpx;display: flex;flex-direction: column;overflow-y: auto;-webkit-overflow-scrolling :touch; overflow-x: hidden; white-space: nowrap;background-color: #f6f6f6;
				&__title {
					font-size: 14px;padding: 16rpx;margin-top: 10rpx;background-color: #FFFFFF;
				}
			}
		}
	}
	
</style>
